<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: #000;
    }
    .zidan{
      position: fixed;
      width: 3px;
      height: 10px;
      background-color: #fff;
      /* top: 10px;
      left: 30px; */
    }
    .fj{
      position: fixed;
      bottom: 0;
      left: 50%;
      width: 80px;
    }
    .mf{
      position: fixed;
      width: 50px;
    }
  </style>
</head>
<body id="body">
  <div class="body">
    
    <img src="./images/fj.png" alt="" class="fj">
  </div>
  <!-- 打小蜜蜂 -->
   <!-- 
      蜂群
         随机出现
         下移
      飞机
         左右移动发射子弹
      子弹
        创建
        移动
          检测
        消失
   -->
      <script>
        alert('点击确定开始 a\d 移动  w发射')
        var body = document.querySelector('.body')
        var fj = document.querySelector('.fj')
        function MiFeng(){
          this.mifeng = []
          this.point=[]
        }
        
        function ZiDan(){
          this.timer=''
          this.zidan=''
          this.x = ''
          this.y = ''
        }
        var _mf = new MiFeng()
        ZiDan.prototype.create=function(x,y){
          var dom = document.createElement('div')
          dom.classList.add('zidan')
          dom.style.top=y+'px'
          dom.style.left=x+'px'
          this.zidan = dom
          body.append(dom)
        }
        ZiDan.prototype.move = function(){
          var _this = this
          this.timer = setInterval(function(){
            _this.zidan.style.top =  _this.zidan.offsetTop-5+'px'
            if(_this.zidan.offsetTop<-10){
              _this.zidan.remove()
            }
            for(var i=0;i<_mf.mifeng.length;i++){
              if((_this.zidan.offsetTop<_mf.mifeng[i].offsetTop+50) && (_this.zidan.offsetLeft>_mf.mifeng[i].offsetLeft&&_this.zidan.offsetLeft<_mf.mifeng[i].offsetLeft+50)){
                _mf.mifeng[i].remove()
                _this.zidan.remove()
                clearInterval(this.timer)
              }
            }
          },1000/60)
        }
        MiFeng.prototype.create=function(x,y){
          var dom = document.createElement('img')
          dom.src='./images/mif.gif'
          dom.classList.add('mf')
          dom.style.top=y+'px'
          dom.style.left=x+'px'
          this.point.push({x:x,y:y})
          this.mifeng.push(dom)
          body.append(dom)
        }
        MiFeng.prototype.empty=function(){}
        window.addEventListener('keydown',function(e){
          if(e.key==='a'){
           if(fj.offsetLeft<0) return
            fj.style.left=fj.offsetLeft-15+'px'
          }
          if(e.key==='d'){
            if(fj.offsetLeft+80 > window.innerWidth){
              return
            }
            fj.style.left=fj.offsetLeft+15+'px'
          }
          if(e.key==='w'){
            var zd = new ZiDan()
            zd.create(fj.offsetLeft+40,fj.offsetTop)
            zd.move()
          }
        })
        
       var dsq= setInterval(function(){
          var _x = Math.abs((Math.random() * (window.innerWidth - 50)) | 0);
          var overlap = false;
          if (_mf.point.length) {
            for (var i = 0; i < _mf.point.length; i++) {
                var left = _mf.point[i].x;
                var right = _mf.point[i].x + 50; // 现有蜜蜂的右边界
                // 检查新蜜蜂的左边界和右边界是否与现有蜜蜂重叠
                if (!((_x + 50 <= left) || (_x >= right))) {
                    overlap = true; // 如果重叠，标记为重叠
                    break; // 找到重叠后退出循环
                }
            }
        }
        // 如果没有重叠，创建新蜜蜂
          if (!overlap) {
              _mf.create(_x, 0);
          } 
        }, 1000);
        var _time_ = setInterval(function(){
          for(var i=0;i<_mf.mifeng.length;i++){
            _mf.mifeng[i].style.top =  _mf.mifeng[i].offsetTop+50+'px'
            if( _mf.mifeng[i].offsetTop > window.innerHeight-50){
              clearInterval(_time_)
              clearInterval(dsq)
              alert('游戏结束')
            }
          } 
        },2500)
        
      </script>
</body>
</html>